<!DOCTYPE html>
<html>
<head>
    <title>websocket test</title>


    <!-- GrowingIO Analytics code version 2.1 -->
    <!-- Copyright 2015-2018 GrowingIO, Inc. More info available at http://www.growingio.com -->

    <script type='text/javascript'>
        !function(e,t,n,g,i){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},n=t.createElement("script"),tag=t.getElementsByTagName("script")[0],n.async=1,n.src=('https:'==document.location.protocol?'https://':'http://')+g,tag.parentNode.insertBefore(n,tag)}(window,document,"script","assets.growingio.com/2.1/gio.js","gio");
        gio('init','8791571b7242d840', {});
        
        //custom page code begin here
        
        //custom page code end here
        
        gio('send');
    
    </script>
    
    <!-- End GrowingIO Analytics code version: 2.1 -->
    

    <style type="text/css">
        body {
            padding: 20px;
        }
        * {
            box-sizing: border-box;
        }
        .login {
            margin-top: 100px;
            text-align: center;
        }
        .login input {
            padding: 12px;
            width: 440px;
        }
        .login button {
            width: 440px;
            margin-top: 12px;
            padding: 12px 20px;
            font-weight: bold;
            font-size: 16px;
        }

        .chat-container {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            box-shadow: 0 0 2px #ccc;
        }
        .chat-container-inner {
            overflow: scroll;
            width: 100%;
            height: 540px;
            padding: 20px 12px;
            background: #fcfcfc;
        }
        .message-item {
            clear: both;
            overflow: hidden;
            padding: 6px 0;
            font-size: 10px;
            
        }
        .message-item > span {
            float: left;
            
        }
        .message-item.mine > span {
            float: right;
            
            
        }
        .message-item .chat-user {
            background: lightblue;
            color: #fff;
            padding: 2px 4px;
            border-radius: 4px;
            margin: 0 10px;
        }
        .message-item.mine > .chat-user {
            background: lightgreen;
        }

        .chat-handle {
            display: flex;
            height: 60px;
            text-align: right;
        }
        .chat-handle input {
            width: 80%;
            height: 100%;
            padding: 12px;
        }
        .chat-handle button {
            flex: 1;
            height: 100%;
            line-height: 60px;
            text-align: center;
            background: #fff;
            font-weight: 600;
        }

        .online-list {
            width: 200px;
            min-height: 100px;
            padding: 12px;
            position: absolute;
            top: 100px;
            right: 100px;
            box-shadow: 1px 1px 2px yellowgreen;
        }
        .online-item {
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }
        
    </style>
</head>
<body>

<div id="app">
    
    <div class="login" v-if="!logined">
        <input type="text" name="user" v-model="user" placeholder="请输入用户名进入聊天室" />
        <div>
            <button @click="toLogin">login</button>
        </div>
    </div>

    <div class="chat-container" v-if="logined">
        <div class="chat-container-inner" ref="chatArea">
            <div class="message-item" :class="{'mine': item.user === currentUser}" v-for="(item, index) in messageArr" :key="index">
                <span class="chat-user">{{item.user}}</span>
                <span class="chat-content">{{item.message}}</span>
            </div>
        </div>
        <div class="chat-handle">
            <input type="text" name="chat" v-model="chatMessage" @keypress.enter="sendMessage" />
            <button @click="sendMessage">send message</button>
        </div>

        <div class="online-list">
            <div class="header">当前在线>></div>
            <div class="online-item" v-for="(item, index) in onlineUsers" :key="index">
                {{item}}
            </div>
        </div>
    </div>
    

</div>

<script type="text/javascript" src="/scripts/websocket-client.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">

    var ws = new MyWebsocket(`ws://${location.hostname}:8888`);

    new Vue({
        el: '#app',
        data: {
            user: '',
            currentUser: '',
            messageArr: [],
            chatMessage: '',
            onlineUsers: []
        },

        computed: {
            'logined': function() {
                return this.currentUser.length > 0;
            }
        },

        mounted() {

            ws.on('login result', (data) => {
                if (data.success) {
                    this.currentUser = this.user;
                    this.messageArr = data.historyMessage;
                    this.$nextTick(()=> {
                        this.setChatArea();
                    });
                } else {
                    this.user = '';
                    alert(data.message);
                }
            });

            ws.on('new message', (data) => {
                this.messageArr.push({
                    user: data.user,
                    message: data.message
                });
                this.$nextTick(()=> {
                    this.setChatArea();
                });
                
            });
            ws.on('online update', (data) => {
                this.onlineUsers = data.onlineUsers;
            })

        },

        methods: {
            toLogin() {
                const {user} = this;
                if (!user.trim().length) {
                    return alert('请输入有效用户名');
                }

                ws.$emit('login', {
                    user
                });
            },
            sendMessage() {
                var chatMessage = this.chatMessage;

                if (!chatMessage.trim().length) {
                    return alert('请输入有效内容');
                }

                ws.$emit('message', {
                    user: this.currentUser,
                    message: chatMessage
                });
                this.chatMessage = '';
            },
            setChatArea() {
                const chatArea = this.$refs.chatArea;
                chatArea.scrollTop = chatArea.offsetHeight;
            }
        }
    })


</script>

</body>
</html>